<template>
  <view class="detail-container">
    <view class="header">
      <text class="school">{{ demand.schoolName }}</text>
      <text class="status-tag" :class="demand.status">{{ demand.status }}</text>
      <button 
        class="apply-btn" 
        @click="showApplyForm"
      >申请组队</button>
    </view>
    
    <view class="map-section">
      <!-- 这里可以集成地图组件 -->
      <image src="/static/map-placeholder.jpg" class="map-image" />
    </view>
    
    <view class="info-card">
      <view class="info-item">
        <uni-icons type="location" size="20" color="#5bc0eb" />
        <text>{{ demand.location }}</text>
      </view>
      <view class="info-item">
        <uni-icons type="person" size="20" color="#5bc0eb" />
        <text>需要{{ demand.needCount }}名支教老师</text>
      </view>
      <view class="info-item">
        <uni-icons type="calendar" size="20" color="#5bc0eb" />
        <text>{{ demand.duration }}</text>
      </view>
    </view>
    
    <view class="content-section">
      <text class="title">需求详情</text>
      <text class="content">{{ demand.content }}</text>
    </view>
    
    <view class="fixed-footer">
      <button class="contact-btn" @click="showContact">联系校方</button>
      <button 
        class="collect-btn" 
        :class="{ collected: isCollected }"
        @click="toggleCollect"
      >
        {{ isCollected ? '已收藏' : '收藏需求' }}
      </button>
    </view>

    <!-- 申请表单弹窗 -->
    <uni-popup ref="applyPopup" type="center">
      <view class="apply-form">
        <text class="form-title">申请组队</text>
        <input 
          v-model="applyForm.name" 
          placeholder="请输入您的姓名"
          class="form-input"
        />
        <input 
          v-model="applyForm.contact" 
          placeholder="请输入联系方式"
          class="form-input"
        />
        <textarea 
          v-model="applyForm.description" 
          placeholder="请简要描述您的支教经验和意向"
          class="form-textarea"
        />
        <view class="form-btns">
          <button class="cancel-btn" @click="hideApplyForm">取消</button>
          <button class="submit-btn" @click="submitApplication">提交申请</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import _ from 'lodash'

export default {
  data() {
    return {
      demand: {
        id: 1,
        schoolName: '阳光希望小学',
        location: '云南省丽江市古城区',
        needCount: 3,
        duration: '2023年9月1日-2024年1月31日',
        content: '急需小学语文、数学、英语教师...',
        contact: '李校长 138****1234',
        status: '招募中'
      },
      isCollected: (uni.getStorageSync('collections') || []).some(item => item.id === this.demand.id),
      applyForm: {
        name: '',
        contact: '',
        description: ''
      }
    }
  },
  methods: {
    showContact() {
      uni.showModal({
        content: this.demand.contact,
        confirmText: '复制号码',
        success: () => {
          uni.setClipboardData({ data: this.demand.contact })
        }
      })
    },
    toggleCollect: _.debounce(function() {
      this.isCollected = !this.isCollected
      const collections = uni.getStorageSync('collections') || []
      if (this.isCollected) {
        collections.push(this.demand)
      } else {
        const index = collections.findIndex(item => item.id === this.demand.id)
        collections.splice(index, 1)
      }
      uni.setStorageSync('collections', collections)
      uni.showToast({
        title: this.isCollected ? '收藏成功' : '已取消收藏'
      })
    }, 500),
    showApplyForm() {
      this.$refs.applyPopup.open()
    },
    hideApplyForm() {
      this.$refs.applyPopup.close()
      this.applyForm = {
        name: '',
        contact: '',
        description: ''
      }
    },
    submitApplication() {
      if (!this.applyForm.name || !this.applyForm.contact || !this.applyForm.description) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }

      const application = {
        id: Date.now(),
        demandId: this.demand.id,
        schoolName: this.demand.schoolName,
        location: this.demand.location,
        applyDate: new Date().toLocaleDateString(),
        status: 'pending',
        ...this.applyForm
      }

      const applications = uni.getStorageSync('applications') || []
      applications.push(application)
      uni.setStorageSync('applications', applications)

      this.hideApplyForm()
      uni.showToast({
        title: '申请已提交',
        success: () => {
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/profile/applications'
            })
          }, 1500)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  position: relative;
  padding: 20rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .apply-btn {
    position: absolute;
    right: 20rpx;
    top: 20rpx;
    background-color: #5bc0eb;
    color: #fff;
    font-size: 24rpx;
    padding: 10rpx 20rpx;
    border-radius: 8rpx;
  }
}

.apply-form {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  width: 600rpx;

  .form-title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
  }

  .form-input {
    border: 1px solid #eee;
    border-radius: 8rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    width: 100%;
    box-sizing: border-box;
  }

  .form-textarea {
    border: 1px solid #eee;
    border-radius: 8rpx;
    padding: 20rpx;
    margin-bottom: 30rpx;
    width: 100%;
    height: 200rpx;
    box-sizing: border-box;
  }

  .form-btns {
    display: flex;
    justify-content: space-between;
    gap: 20rpx;

    button {
      flex: 1;
      padding: 20rpx 0;
      border-radius: 8rpx;
      font-size: 28rpx;
    }

    .cancel-btn {
      background-color: #f5f5f5;
      color: #666;
    }

    .submit-btn {
      background-color: #5bc0eb;
      color: #fff;
    }
  }
}
</style>